現在許多網站都有分享按鈕，按了之後會看到分享到社群媒體、藍芽分享又或是複製連結分享。
今天想加上一個分享按鈕，點擊後複製網頁連結，並跳出已複製連結的提醒訊息。

先在HTML分別加入提醒訊息和分享按鈕的元素，這裡先把提醒訊息加上class隱藏起來。

<div id="copy-alert" class="hide">已複製連結</div>

<a class="list-link" id="share"> </a>

讓按鈕點擊後複製準備好的網址

<script>
  $("#share").on('click', function() {
    navigator.clipboard.writeText(" 這裡是要複製的連結 ");
  });
</script>

這邊我希望點擊之後提示訊息出現，等待一下後再消失。

<script>
  $("#share").on('click', function() {
    navigator.clipboard.writeText(" 這裡是要複製的連結 ").then(function() {
      //和讀取畫面相同，點擊後把class移除 
      $("#copy-alert").toggleClass("hide");
    }).catch(function(error) {
      console.error(" 複製錯誤 ", error);
    });

    setTimeout(function() {
      //等待1500ms後再次隱藏
      $("#copy-alert").toggleClass("hide");
    }, 1500);
  });
</script>

參考資料/延伸閱讀

1. medium
2. ithome